<template>
	<view class="content">
		<scroll-view scroll-x class="bg-gradual-green nav text padding-top  ">
			<view class="padding-top">
				<view class="cu-item " :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
					<text class="cuIcon-message"></text> 最新公告
				</view>
				<view class="cu-item " :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
					<text class="cuIcon-copy"></text> 最新文章
				</view>
			</view>
		</scroll-view>
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
			@change="swiperChangeIndex" :current="current" interval="5000" duration="500"
			:style="[{animation: 'show 0.2s 1'}]">
			<swiper-item v-for="(item,index) in imgList" :key="index">
				<image :src="item.url" mode="aspectFill"></image>
				<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video> -->
			</swiper-item>
		</swiper>
		<view v-if="TabCur==0" class="cu-form-group  animation-slide-bottom  "
			style="margin-bottom: 4rpx;margin-top: 6rpx;" :style="[{animationDelay: '0.1s'}]">
			<view class="content">
				<text class="cuIcon-new text-blue "></text>
				<text class="text-grey margin-left-sm">系统公告</text>
			</view>
		</view>
		<view v-if="TabCur==0">
			<scroll-view v-if="TabCur==0" :style="{height: scprllHeight + 'rpx'}" scroll-y="true"
				:refresher-enabled="isPort" :refresher-triggered="triggered" :refresher-threshold="100"
				refresher-background="lightblack" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onPageScroll"
				@scrolltolower="onReachBottom">
				<view v-if="TabCur==0" class="cu-timeline" v-for="(item,index) in announcementList " :key="index">
					<view class="cu-item">
						<view class="content">
							<view class="cu-capsule radius">
								<view class="cu-tag bg-cyan">时间</view>
								<view class="cu-tag line-cyan">{{item.createDate}}</view>
							</view>
							<view class="margin-top">{{item.title}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view v-if="TabCur==1" class="cu-form-group  animation-slide-bottom  "
			style="margin-bottom: 4rpx;margin-top: 6rpx;" :style="[{animationDelay: '0.1s'}]">
			<view class="content">
				<text class="cuIcon-new text-blue "></text>
				<text class="text-grey margin-left-sm">最新文章</text>
			</view>
		</view>
		<view v-if="TabCur==1">
			<scroll-view v-if="TabCur==1" :style="{height: scprllHeight + 'rpx'}" scroll-y="true"
				:refresher-enabled="isPort" :refresher-triggered="triggered" :refresher-threshold="100"
				refresher-background="lightblack" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onPageScroll"
				@scrolltolower="onReachBottom">
				<view v-if="TabCur==1" class="cu-timeline" v-for="(item,index) in essayList " :key="index"
					style=" padding-bottom: 5%;">
					<view class="cu-item">
						<view class="content">
							<view class="cu-capsule radius">
								<view class="cu-tag bg-cyan">时间</view>
								<view class="cu-tag line-cyan">{{item.createDate}}</view>
							</view>
							<view class="margin-top">{{item.title}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scprllHeight: '',
				triggered: false,
				isPort: true,
				scrollTop: 0,
				title: 'Home',
				TabCur: 0,
				current: 0,
				swiperList: [{
						id: 1,
						type: 'image',
						url: '/static/logo.gif',
						link: ''
					},
					{
						id: 2,
						type: 'image',
						url: '/static/logo.png',
						link: ''
					},
				],
				imgList: [

				],
				announcementList: [

				],
				essayList: [

				]

			};
		},

		onLoad() {

			var that = this
			that.imgList = []
			uni.request({
				url: "https://www.turkeylike.cn:8900/fzulab/indexPic/listall",
				success(res) {

					// console.log(res.statusCode)
					// console.log(res.data.result)
					let urlList = res.data.result
					for (var i = 0; i < urlList.length; i++) {
						that.imgList.push({
							'url': urlList[i].imgUrl
						})
					}
				}
			})
			this.getAnnouncementList()
			this.getessay()

		},
		// //页面监听下拉动作（和onLoad等生命周期函数同级）
		// onPullDownRefresh() {
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh()
		// 	}, 1000)

		// 	// uni.startPullDownRefresh({

		// 	// 	success() {
		// 	// 		//成功回调
		// 	// 	},
		// 	// 	fail() {
		// 	// 		//失败回调
		// 	// 	}
		// 	// })
		// 	// uni.stopPullDownRefresh()//停止下拉刷新
		// },
		methods: {
			tabSelect(e) {

				this.TabCur = e.currentTarget.dataset.id;
				console.log(e.currentTarget.dataset.id)


				if (this.TabCur == 0) {
					this.getAnnouncementList()
				}
				console.log(this.TabCur)
				console.log("切换view")
				// this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				// console.log(this.scrollLeft)
			},
			swiperChangeIndex(e) {
				this.current = e.mp.detail.current
			},
			getAnnouncementList() {

				var that = this
				that.announcementList = []
				uni.request({


					url: "https://www.turkeylike.cn:8900/fzulab/article/list",
					method: 'GET',
					data: {
						page: 1,
						limit: 20,
						columnId: 3
					},


					success(res) {


						let urlList = res.data.result.list
						console.log(urlList)
						for (var i = 0; i < urlList.length; i++) {
							that.announcementList.push({
								'title': urlList[i].title,
								'createDate': urlList[i].createDate,

							})
						}

					}
				})
				console.log(that.announcementList.length)
			},
			getessay() {

				var that = this
				that.essayList = []
				uni.request({
					url: "https://www.turkeylike.cn:8900/fzulab/article/listall?page=1&limit=10",
					method: 'GET',
					data: {
						page: 1,
						limit: 10,
					},
					success(res) {

						let urlList = res.data.result.list
						console.log(urlList)
						for (var i = 0; i < urlList.length; i++) {
							that.essayList.push({
								'title': urlList[i].title,
								'createDate': urlList[i].createDate
							})
						}
					}
				})
			},
			//是否开启自定义触发刷新
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
				if (this.scrollTop < 300) {
					this.isPort = true
				} else {
					this.isPort = false
				}
			},
			// 下拉刷新操作
			//1、触发下拉操作（非刷新）
			onPulling(e) {

				this.triggered = true
			},
			//2、触发刷新
			onRefresh() {
				if (this._freshing) return
				this._freshing = true
				//显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 
				wx.showLoading({
					title: '刷新中...',
				})
				// 添加定时器1秒后执行的操作
				setTimeout(() => {
					this.triggered = false
					this._freshing = false
					//重新加载数据
					if (this.TabCur == 0) {
						this.getAnnouncementList()
					} else {
						this.getessay()
					}
				}, 1000)
			},
			//3、触发重置
			onRestore() {
				this.triggered = 'restore' // 需要重置
				wx.hideLoading();
				wx.showToast({
					title: "刷新成功",
					duration: 1000, //提示的延迟时间，单位毫秒，默认：1500 
					mask: true //是否显示透明蒙层，防止触摸穿透，默认：false 			    
				})
			},
			//4、触发终止
			onAbort() {
				//停止下拉刷新
				wx.stopPullDownRefresh();
			},
			onReachBottom() {

				wx.showToast({
					title: "已经到达底部",
					duration: 1000, //提示的延迟时间，单位毫秒，默认：1500 
					mask: false, //是否显示透明蒙层，防止触摸穿透，默认：false 			    
				})
			}

		}
	};
</script>

<style>
	/* .content {
	text-align: center;
	height: 400upx;
	margin-top: 200upx;
} */
</style>
